<template>
        <div class="other-settings views-container" v-loading="loding">
           <div class="wlm-table" style="border-radius: 12px;">
             <div style="display:flex;align-items: center; justify-content:space-between;">
                 <div style="display:flex;align-items: center;">
                     <div>统计时间</div>
                        <!-- :picker-options="pickerOptions" -->

                   <div style="margin-left:20px;">
                       <el-date-picker
                       v-model="time"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期" @change="handtimebtn(time)">
                        </el-date-picker>
                   </div>
                   <div style="margin-left:20px;">
                        注：利润分析页面数据从{{create_time}}开始统计<span style="color:red;">(此数据仅供参考)</span>
                   </div>
                 </div>
                
                   <!-- <div>
                          <div class="wlm-form">
                                    <div class="input-slot flex-row flex-align-c flex-justify-s wlm-input-appendbox">
                                        结算费率：
                                        <el-input-number v-model="wechat_sale" :controls="false" placeholder="" ></el-input-number>
                                            <div style="height: 34px;
                                                padding: 0px 13px;
                                                text-align: center;
                                                line-height: 32px;
                                                background: rgb(245, 247, 250);
                                                box-sizing: border-box;
                                                border-color: rgb(220, 223, 230) transparent;
                                                border-style: solid;
                                                border-width: 1px;
                                                color: rgb(144, 147, 153);border-right-color: rgb(220, 223, 230);
                                                border-bottom-right-radius: 4px;
                                                border-top-right-radius: 4px;">%</div>
                                        </div>
                          </div>
                          <div>
                              <el-button type="primary" @click="wechatSalebtn">确认</el-button>
                          </div>
                   </div> -->
             </div>
           </div>

            <div class="wlm-table" style="border-radius: 12px;margin-top:20px;">
                <!-- 核心数据开始 -->
               <div>
                    <div>核心数据</div>
                    <div style="display:flex;flex-wrap:wrap;" >
                        <div style="width: 25%;padding: 20px 40px;" v-for="(item,index) in coredata" :key="index">
                            <p>{{item.title}}
                                   <el-tooltip class="item" effect="dark" :content="item.title=='利润(元)'?'付款时间在统计时间内的订单，支付金额 - 商家结算 - 分销佣金 - 退款金额':item.title=='支付金额(元)'?'付款时间在统计时间内的订单，商城订单的实付金额':item.title=='退款金额(元)'?'付款时间在统计时间内的订单，商城订单的实际退款金额':item.title=='商家所得(元)'?'付款时间在统计时间内的订单，应结给商家金额':item.title=='分销佣金(元)'?'付款时间在统计时间内的订单，应结给分销人金额':item.title=='其他'?'会员卡支付金额+余额充值金额+任务宝支付金额+直播付费金额+付费抽奖金额+付费分销金额':''" placement="top-start">
                                        <i class="el-icon-question"></i>
                                   </el-tooltip>
                            </p>
                            <p>{{item.num}}</p>
                        </div>
                    </div>
               </div>
               <!-- 核心数据结束 -->
                <!-- 利润分析 -->
                <div>
                    <!-- echares展示 -->
                      <div class="views-container">
                            <div style="position: absolute;">利润分析(元)</div>
                        <div id="echart1"></div>
                      </div>
                </div>
                <!-- 利润分析结束 -->
                
            </div>
                <!-- 日利润 -->
            <div class="wlm-table" style="border-radius: 12px;margin-top:20px;">
                 <div>
                    <div>日利润</div>
                        <div>
                               <!--  -->

                              <el-table
                              show-summary
                              :summary-method="getSummaries"
                              :data="tableData"
                            style="width: 100%">
                            <el-table-column
                                prop="date"
                                label="时间"
                                width="180">
                            </el-table-column>
                            
                              <el-table-column
                                prop="address"
                                label="支付金额(元)">
                                    <template slot-scope="scope">
                                    <p>{{newdata.pay_price[scope.row.date].value}}</p>
                                    </template>
                            </el-table-column>
                            <el-table-column
                                prop="address"
                                label="退款金额(元)">
                                   <template slot-scope="scope">
                                    <p>{{newdata.refund_money[scope.row.date].value}}</p>
                                    </template>
                            </el-table-column>
                            <el-table-column
                                prop="value"
                                label="商家所得(元)">
                                 <template slot-scope="scope">
                                    <p>{{newdata.business_money[scope.row.date].value}}</p>
                                    </template>
                            </el-table-column>
                              <el-table-column
                                prop="value"
                                label="分销佣金(元)">
                                 <template slot-scope="scope">
                                    <p>{{newdata.dealer_money[scope.row.date].value}}</p>
                                    </template>
                            </el-table-column>
                            <el-table-column
                                prop="address"
                                label="其他(元)">
                                   <template slot-scope="scope">
                                    <p>{{newdata.other[scope.row.date].value}}</p>
                                    </template>
                            </el-table-column>
                              <el-table-column
                                prop="address"
                                label="利润(元)">
                                    <template slot-scope="scope">
                                    <p>{{newdata.profit[scope.row.date].value}}</p>
                                    </template>
                            </el-table-column>
                          
                            </el-table>
                        </div>
                 </div>
            </div>
            <!-- 日利润结束 -->
        </div>
</template>
<script>
import {
profit,statisticsSet,statisticsSave
} from "@/api/basicdata";


export default {
    created () {
       
    },
    mounted(){
        this.profitData()
        this.statisticsSetbtn()
    },
    data () {
        return {
            // pickerOptions: {
            //         disabledDate(time) {
            //             //  let times = []
            //             //         time.map(item=>{
            //             //         times.push(new Date(item).getTime())
            //             //     })
            //         return time.getTime() < 1618848000000 - 8.64e7
            //         }
            //     },
                // new Date(curDate.getTime() + 24*60*60*1000)
            time:[+new Date()-(24*60*60*1000), new Date()],
            coredata:[],//核心数据
            tableData: [],
            newdata:{},
            create_time:'',
            wechat_data:{},
            wechat_sale:'',
            loding:false,
        }
    },
    methods: {
        statisticsSetbtn(){
            statisticsSet().then(res=>{
                if(res.data.code==1){
                    console.log("4444444ssssfffff",...res.data.data)
                    this.wechat_data = res.data.data
                }
            })
    },
        wechatSalebtn(){
            statisticsSave({...this.wechat_data,wechat_sale:this.wechat_sale}).then(res=>{
                if(res.data.code==1){
                    this.$message.success("保存成功！")
                }
            })
        },
        handtimebtn(time){
             this.loding = true
             let times = []
                this.time.map(item=>{
                times.push(new Date(item).getTime())
            })
           profit({time:times}).then(res=>{
                if (res.data.code == 1) {
                     this.loding = false;
                    // this.coredata.push(res.data.data.data)
                    this.newdata = res.data.data.lists
                    this.create_time = res.data.data.create_time
                    this.sum_profit = res.data.data.sum_profit
                    const series = [
                    {
                        name: "利润",
                        type: "line",
                        stack: "利润",
                        data: []
                    },
                    {
                        name: "支付金额",
                        type: "line",
                        stack: "支付金额",
                        data: []
                    },
                    {
                        name: "退款金额",
                        type: "line",
                        stack: "退款金额",
                        data: []
                    },
                    {
                        name: "商家所得",
                        type: "line",
                        stack: "商家所得",
                        data: []
                    },
                    {
                        name: "分销佣金",
                        type: "line",
                        stack: "分销佣金",
                        data: []
                    },
                    {
                        name: "其他",
                        type: "line",
                        stack: "其他",
                        data: []
                    },
                    ];
                    const profit = Object.values(res.data.data.lists.profit)
                    const pay_price = Object.values(res.data.data.lists.pay_price)
                    const refund_money = Object.values(res.data.data.lists.refund_money)
                    const business_money = Object.values(res.data.data.lists.business_money)
                    const dealer_money = Object.values(res.data.data.lists.dealer_money)
                    const other = Object.values(res.data.data.lists.other)
                    const h = Object.keys(res.data.data.lists.business_money);
                    this.tableData = Object.values(res.data.data.lists.business_money);
                    console.log("23222",profit,pay_price,refund_money,business_money,dealer_money,other)
                    profit.map(item=>{
                        series[0].data.push(item.value)
                    })
                    pay_price.map(item=>{
                        series[1].data.push(item.value)
                    })
                     refund_money.map(item=>{
                        series[2].data.push(item.value)
                    })
                    business_money.map(item=>{
                        series[3].data.push(item.value)
                    })
                    dealer_money.map(item=>{
                        series[4].data.push(item.value)
                    })
                    other.map(item=>{
                        series[5].data.push(item.value)
                    })
                    this.coredata = []
                    this.coredata.push(
                        {
                        title:'利润(元)',
                        num:res.data.data.data.profit
                        },
                         {
                        title:'支付金额(元)',
                        num:res.data.data.data.pay_price
                        },
                         {
                        title:'退款金额(元)',
                        num:res.data.data.data.refund_money
                        },
                        {
                        title:'商家所得(元)',
                        num:res.data.data.data.business_money
                        },
                         {
                        title:'分销佣金(元)',
                        num:res.data.data.data.dealer_money
                        },
                         {
                        title:'其他',
                        num:res.data.data.data.other
                        },
                    )
                      //echarts数据
                    const myEchart = this.$echarts.init(
                        document.getElementById("echart1"),
                        "macarons"
                        );
                    myEchart.setOption({
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            itemGap: 16,
                                itemWidth: 18,
                                itemHeight: 10,
                            data: [
                                {
                                    name: "利润"
                                    },
                                    {
                                    name: "支付金额"
                                    },
                                    {
                                    name: "退款金额"
                                    },
                                    {
                                    name: "商家所得"
                                    },
                                    {
                                    name: "分销佣金"
                                    },
                                    {
                                    name: "其他"
                                    },
                            ],
                            textStyle: {
                        color: "#a8aab0",
                        fontStyle: "normal",
                        fontFamily: "微软雅黑",
                        fontSize: 12
                    }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data:h,
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: series
                    }) 
                }
            }).finally(()=>{
                this.loding = false
            })
        },
        profitData(){
            // this.loding = true
            //  let time = []
            //     this.time.map(item=>{
            //     time.push(new Date(item).getTime())
            // })
            profit({date_type:3}).then(res=>{
                if (res.data.code == 1) {
                     this.loding = false;
                    // this.coredata.push(res.data.data.data)
                    this.newdata = res.data.data.lists
                    this.create_time = res.data.data.create_time
                    this.sum_profit = res.data.data.sum_profit
                    const series = [
                    {
                        name: "利润",
                        type: "line",
                        stack: "利润",
                        data: []
                    },
                    {
                        name: "支付金额",
                        type: "line",
                        stack: "支付金额",
                        data: []
                    },
                    {
                        name: "退款金额",
                        type: "line",
                        stack: "退款金额",
                        data: []
                    },
                    {
                        name: "商家所得",
                        type: "line",
                        stack: "商家所得",
                        data: []
                    },
                    {
                        name: "分销佣金",
                        type: "line",
                        stack: "分销佣金",
                        data: []
                    },
                    {
                        name: "其他",
                        type: "line",
                        stack: "其他",
                        data: []
                    },
                    ];
                    const profit = Object.values(res.data.data.lists.profit)
                    const pay_price = Object.values(res.data.data.lists.pay_price)
                    const refund_money = Object.values(res.data.data.lists.refund_money)
                    const business_money = Object.values(res.data.data.lists.business_money)
                    const dealer_money = Object.values(res.data.data.lists.dealer_money)
                    const other = Object.values(res.data.data.lists.other)
                    const h = Object.keys(res.data.data.lists.business_money);
                    this.tableData = Object.values(res.data.data.lists.business_money);
                    profit.forEach(item=>{
                        series[0].data.push(item.value)
                    })
                    pay_price.forEach(item=>{
                        series[1].data.push(item.value)
                    })
                     refund_money.forEach(item=>{
                        series[2].data.push(item.value)
                    })
                    business_money.forEach(item=>{
                        series[3].data.push(item.value)
                    })
                    dealer_money.forEach(item=>{
                        series[4].data.push(item.value)
                    })
                    other.forEach(item=>{
                        series[5].data.push(item.value)
                    })
                    this.coredata = []
                    this.coredata.push(
                        {
                        title:'利润(元)',
                        num:res.data.data.data.profit
                        },
                         {
                        title:'支付金额(元)',
                        num:res.data.data.data.pay_price
                        },
                         {
                        title:'退款金额(元)',
                        num:res.data.data.data.refund_money
                        },
                        {
                        title:'商家所得(元)',
                        num:res.data.data.data.business_money
                        },
                         {
                        title:'分销佣金(元)',
                        num:res.data.data.data.dealer_money
                        },
                         {
                        title:'其他',
                        num:res.data.data.data.other
                        },
                    )
                      //echarts数据
                    const myEchart = this.$echarts.init(
                        document.getElementById("echart1"),
                        "macarons"
                        );
                    myEchart.setOption({
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            itemGap: 16,
                                itemWidth: 18,
                                itemHeight: 10,
                            data: [
                                {
                                    name: "利润"
                                    },
                                    {
                                    name: "支付金额"
                                    },
                                    {
                                    name: "退款金额"
                                    },
                                    {
                                    name: "商家所得"
                                    },
                                    {
                                    name: "分销佣金"
                                    },
                                    {
                                    name: "其他"
                                    },
                            ],
                            textStyle: {
                        color: "#a8aab0",
                        fontStyle: "normal",
                        fontFamily: "微软雅黑",
                        fontSize: 12
                    }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data:h,
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: series
                    }) 
                }
            }).finally(()=>{
                this.loding = false
            })
        },
        // 列表最后显示合计逻辑
        getSummaries(param){
              const { columns, data } = param;
              const len = columns.length
              const sums = [];
              columns.forEach((column, index) => {
                //如果是第一列，则最后一行展示为“总计”两个字
                    if (index === 0) {
                    sums[index] = '总计'
                    //如果是最后一列，索引为列数-1，则显示计算总和
                    } else if (index === len - 1) {
                    sums[index] = this.sum_profit
                    //如果是除了第一列和最后一列的其他列，则显示为空
                    } else {
                    sums[index] = ''
                    }
                })
                return sums
                },
        
      
    },

}
</script>
<style lang="scss" scoped>
#echart1 {
  width: 95%;
  height: 500px;
}
.append-right{
    border-right-color: #dcdfe6;

  }
</style>